<template>
    <div>
        <div class="container">
            <div class="row justify-content-evenly">
                <div class="col-12 col-md-3 a">123</div>
                <div class="col-12 col-sm-6 col-md-4 b">
                    <span>更多</span>
                    <!--  if 跟for 同时使用谁的优先级高?  -->
                    <a
                        v-for="(item, index) in new1"
                        :key="index"
                        class="nav-link d-flex"
                        href=""
                    >
                        <img
                            style="width: 100px"
                            v-if="index == 0"
                            :src="item.cover"
                            alt=""
                        />
                        <span
                            style="margin-right: 10px"
                            class="mr-2 sm-none"
                        >
                            {{ item.CreateDate | cleartime }}</span
                        >
                        <p class="text-ellipsisl1">
                            {{ item.title }}
                        </p>
                    </a>
                </div>
                <div class="col-12 col-sm-6 col-md-4 b">
                    <span>更多</span>
                    <!--  if 跟for 同时使用谁的优先级高?  -->
                    <a
                        v-for="(item, index) in new2"
                        :key="index"
                        class="nav-link d-flex"
                        href=""
                    >
                        <img
                            style="width: 100px"
                            v-if="index == 0"
                            :src="item.cover"
                            alt=""
                        />
                        <span
                            style="margin-right: 10px"
                            class="mr-2 sm-none"
                        >
                            {{ item.CreateDate | cleartime }}</span
                        >
                        <p class="text-ellipsisl1">
                            {{ item.title }}
                        </p>
                    </a>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    // 发生请求
    // post
    // fetch() 浏览器自带的一个变量
    props: ["new1", "new2"],
}
</script>

<style lang="scss" scoped>
.a,
.b,
.c {
    // height: 200px;
}
.a {
    background-color: red;
}
.b {
    background-color: rgb(14, 235, 132);
}
.c {
    background-color: rgb(104, 72, 141);
}
.text-ellipsisl1 {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

@include media-breakpoint-only(sm) {
    .sm-none {
        display: none;
    }
}
</style>
